<template>
  <div class="container-dialog">
    <el-row>
      <el-form :model="form"
               :inline="true"
               ref="form"
               :rules="rules">
        <el-col :span="24"
                class="mid-top">
          <el-col :span="12"
                  class="mid-top-right">
            <el-form-item id="midPercent"
                          label="芯片编号"
                          prop="settingNo">
              <el-input v-model="form.settingNo"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"
                  class="mid-top-right-next">
            <el-form-item id="midPercent"
                          label="芯片类型"
                          prop="settingType">
              <el-select v-model="form.settingType"
                         placeholder="请选择"
                         @change="onTypeChange">
                <el-option v-for="item in optionsType"
                           :key="item.value"
                           :label="item.name"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-col>
        <div class="bottom-box">
          <el-button @click="onBack">返 回</el-button>
          <el-button type="primary"
                     @click="onSave('form')">保 存</el-button>
        </div>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { RfidApi } from '@/services/SystemSetting'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  props: {
    todos: String,
    rfidObj: Object,
    catchBack: Function,
    catchSave: Function
  },
  data () {
    return {
      updateObj: {
        rfid_num: '',
        rfid_type: ''
      },
      rfidobj: {},
      rfidIdObj: {},
      optionsType: [],
      dialogFormVisible: false,
      form: {
        settingNo: '',
        settingType: '',
        settingIMEI: ''
      },
      rules: {
        settingNo: [{ required: true, message: '芯片编号不能为空', trigger: 'blur' }],
        settingType: [{ required: true, message: '芯片类型不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 芯片类型改变时触发的事件
    onTypeChange (val) {
      this.form.settingType = val
      //console.log('类型=', val)
    },
    // 返回事件
    onBack () {
      // 记忆值清空
      this.form.settingNo = ''
      this.form.settingType = ''
      this.catchBack('0')
    },
    // 保存事件
    onSave (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          if (this.todos == '1') {
            RfidApi.creatRfid({
              data: {
                rfid_num: this.form.settingNo,
                rfid_type: this.form.settingType
              }
            }).then((res) => {
              if (res.code == 0) {
                this.$message.success('添加成功!');
                this.catchSave('SUCCESS');
              } else {
                this.$message.error(res.msg)
              }
            }).catch((error) => {
              console.log(error)
            })
          } else {
            this.updateObj.id = this.rfidIdObj.rfid_id;
            this.updateObj.rfid_num = this.form.settingNo;
            this.updateObj.rfid_type = this.form.settingType;
            //console.log('updateObje=', this.updateObj)
            RfidApi.updateRfid({
              data: this.updateObj
            }).then((res) => {
              if (res.code == 0) {
                this.$message.success('修改成功!')
                this.catchSave('SUCCESS');
              } else {
                this.$message.error(res.msg)
              }
            }).catch((error) => {
              console.log(error)
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取标准码
    standardCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'rfidType'
        }
      }).then((res) => {
        this.optionsType = res.data.list
        //console.log('芯片类型res=', res)
      }).catch((error) => {
        console.log(error)
      })
    },
    // 详情
    onDetailRfid () {
      //this.rfidobj.id = this.rfidId;
      // RfidApi.onDetailRfid({
      //   params: this.rfidObj
      // }).then((res) => {
      //   console.log('查看详情接口=', res)
      // }).catch((error) => {
      //   console.log(error)
      // })
    }
  },
  watch: {
    todos (n, o) {
      //console.log('组件弹框', n, o)
    },
    rfidObj (n, o) {
      if (n != {}) {
        this.rfidIdObj = n;//获取芯片一组对象
        this.form.settingNo = this.rfidIdObj.rfid_num;
        this.form.settingType = this.rfidIdObj.rfid_type;

        this.rfidIdObj
        // this.onDetailRfid();
       // console.log('监听的rfidObj=', this.rfidIdObj);
      }

    }
  },
  created () {

    if (this.rfidObj != {}) {
      this.rfidIdObj = this.rfidObj;//获取芯片一组对象
      this.form.settingNo = this.rfidIdObj.rfid_num;
      this.form.settingType = this.rfidIdObj.rfid_type;
      // this.onDetailRfid();
      //console.log('created前的rfidObj=', this.rfidObj);
    }
    // 获取标准码
    this.standardCode()
  }
}
</script>
<style lang="scss" scoped>
.mid-right-span {
  width: 20%;
  height: 40px;
  line-height: 40px;
  display: block;
  float: left;
}
#midPercent {
  width: 100% !important;
}
.mid-top-right： {
  display: flex;
  flex-direction: row;
  padding-right: 12px;
}
.mid-top-right-next {
  display: flex;
  flex-direction: row;
  padding-left: 12px;
}
/deep/.mid-top-right-next .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100% !important;
}
.mid-top {
  margin-bottom: 20px;
}
/deep/ .mid-top .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}
/deep/ .mid-top .el-select {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}
.mid-bottom-span {
  display: block;
  float: left;
  width: 10%;
  height: 40px;
  line-height: 40px;
}
.mid-bottom-right {
  padding-top: 20px;
}
/deep/ .mid-bottom-right .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 90%;
}
.bottom-box {
  text-align: center;
}
</style>
